<template>
  <div class="biz-report message-content" @click="viewDetail">
    <div class="biz-report-content">
      <div class="biz-report-content-title">{{ msgInfo.messageContent.reportName }}</div>
      <div v-if="msgInfo.messageContent.reportThumbnailType == 'sourceRoute'" class="biz-report-content-noData">
        <div class="biz-report-content-noData-img" :style="{ backgroundImage: `url(${msgInfo.messageContent.reportThumbnail})` }">
        </div>
      </div>
      <div v-else class="biz-report-content-img" :style="{ backgroundImage: `url(${msgInfo.messageContent.reportThumbnail})` }">
      </div>
    </div>
  </div>
</template>
  
<script>
import { getOssUrl } from '@src/util/assets'
const biz_report = getOssUrl('/im/biz_report.jpg')

import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

export default {
  name: 'report-message',
  props: {
    msgInfo: {
      type: Object,
      default: () => ({}),
    },
    idx: {
      type: Number,
    },
  },
  data() {
    return {
      biz_report
    };
  },
  methods: {
    viewDetail() {
      let { reportGroupName, reportName, routingKey } = this.msgInfo.messageContent || {}
      let params = '';
      if (routingKey) {
        if (routingKey.includes('/shb/home')) {
          params = `menuName=${reportGroupName}&chartName=${reportName}`;
        } else {
          params = routingKey.replace('CUSTOMREPORT-', '');
        }
      } else {
        params = `menuName=${reportGroupName}&chartName=${reportName}`;
      }
      openAccurateTab({
        type: PageRoutesTypeEnum.PageIntelligenceReport,
        params,
      });
    },
  },
};
</script>
  
<style scoped lang='scss'>
.message-content {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.biz-report {
  display: flex;
  justify-content: center;
  cursor: pointer;

  &-content {
    width: 300px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 12px;
    font-weight: 500;

    &-title {
      height: 17px;
      font-size: 12px;
      color: #3d3d3d;
      line-height: 17px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-noData {
      width: 246.4px;
      height: 154px;
      margin-top: 6px;
      display: flex;
      &-img {
        margin: auto;
        position: static;
        left: -5.2px;
        top: 0px;
        width: 120px;
        height: 120px;
        opacity: 0.8;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
    }

    &-img {
      position: static;
      left: -5.2px;
      top: 0px;
      width: 246.4px;
      height: 154px;
      opacity: 1;
      margin-top: 6px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
}</style>